/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-04-19 09:48:36
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-05-28 17:26:11
 */

// https://usehooks.com/useWhyDidYouUpdate/

import { useEffect, useRef } from "react";

export default (name, props) => {
  // 获取一个可变的ref对象，我们可以在其中存储道具…
  // ……下次运行这个钩子时进行比较。
  const previousProps = useRef(null);
  useEffect(() => {
    if (process.env.NODE_ENV === "development") {
      if (previousProps.current) {
        // 从以前和当前的道具中获得所有的键
        const allKeys = Object.keys({ ...previousProps.current, ...props });
        // 使用这个对象来跟踪改变的道具
        const changesObj = {};

        allKeys.forEach((key) => {
          // 如果先前与当前不同
          if (previousProps.current[key] !== props[key]) {
            // Add to changesObj
            changesObj[key] = {
              from: previousProps.current[key],
              to: props[key]
            };
          }
        });
        // 如果changesObj不为空，则输出到控制台
        if (Object.keys(changesObj).length) {
          console.log("[why-did-you-update]", name, changesObj);
        }
      }
      // 最后，用当前的道具更新前一个钩子调用
      previousProps.current = props;
    }
  });
};
